<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>2.事件传参.html</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <h1>欢迎来到{{school}}</h1>
      <button @click="test1">按钮1（不传参）</button> <br><br>
      <button @click="test2(6)">按钮2（传一个参数）</button> <br><br>
      <button @click="test3(6,7,8,9)">按钮3（传多个参数）</button> <br><br>
      <button @click="test4(6,7,8,9,$event)">按钮4（传参数+事件对象）</button> <br><br>
      <button @click="test5(school)">按钮5（传递的参数也可以是data中的数据）</button>
    </div>

    <script type="text/javascript">
      const vm = new Vue({
        el:'#demo',
        data:{
          school:'尚硅谷',
          address:'宏福科技园'
        },
        methods:{
          test1(event){
            console.log('你点击了按钮1',event)
          },
          test2(number,event){
            console.log('你点击了按钮2',number)
          },
          test3(n1,n2,n3,n4,event){
            console.log('你点击了按钮3',n1,n2,n3,n4,event)
          },
          test4(n1,n2,n3,n4,event){
            console.log('你点击了按钮4',n1,n2,n3,n4,event)
          },
          test5(value){
            console.log('你点击了按钮5',value)
          }
        }
      })
    </script>
  </body>
</html>